<!--
# coding=UTF-8
# Copyright (c) 2025 Bird Software Solutions Ltd
# This program and the accompanying materials
# are made available under the terms of the Eclipse Public License 2.0
# which accompanies this distribution, and is available at
# https://www.eclipse.org/legal/epl-2.0/
#
# SPDX-License-Identifier: EPL-2.0
#
# Contributors:
#    Neil Mackenzie - initial API and implementation
#    Benjamin Arfa - improvements
#
-->
{% extends 'base.html' %}

{% block content %}
<h1>Show Gaps in Cube Structure Item Links</h1>
<a href="{% url 'pybirdai:workflow_task' task_number=2 operation='review' %}">Back to Review</a>
<div class="filters">
    <form method="get" id="cubeForm">
        <div class="form-group">
            <label for="cube_id">Select Cube:</label>
            <select name="cube_id" id="cube_id" onchange="this.form.submit()">
                <option value="">All Cubes</option>
                {% for cube in cubes %}
                    <option value="{{ cube.cube_id }}" {% if selected_cube_id == cube.cube_id %}selected{% endif %}>
                        {{ cube.cube_id }} - {{ cube.name }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </form>
</div>

{% if selected_cube_id %}
    {% if gaps %}
        {% for gap in gaps %}
            <div class="gap-section">
                <h3>Join Identifier: {{ gap.join_identifier }}</h3>
                <div class="cube-links">
                    <h4>Related Cube Links:</h4>
                    <ul>
                        {% for cube_link in gap.cube_links %}
                            <li>
                                {{ cube_link.cube_link_id }} -
                                Primary: {{ cube_link.primary_cube_id.cube_id }},
                                Foreign: {{ cube_link.foreign_cube_id.cube_id }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="missing-items">
                    <h4>Missing Links for Cube Structure Items:</h4>
                    <table>
                        <thead>
                            <tr>
                                <th>Variable ID</th>
                                <th>Description</th>
                                <th>Is Mandatory</th>
                                <th>Order</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in gap.missing_items %}
                                <tr>
                                    <td>{{ item.variable_id }}</td>
                                    <td>{{ item.description }}</td>
                                    <td>{{ item.is_mandatory|yesno:"Yes,No" }}</td>
                                    <td>{{ item.order }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="no-gaps">
            <p>No gaps found for the selected cube.</p>
        </div>
    {% endif %}
{% else %}
    {% if gaps %}
        {% for gap in gaps %}
            <div class="gap-section">
                <h3>Join Identifier: {{ gap.join_identifier }}</h3>
                <div class="cube-links">
                    <h4>Related Cube Links:</h4>
                    <ul>
                        {% for cube_link in gap.cube_links %}
                            <li>
                                {{ cube_link.cube_link_id }} -
                                Primary: {{ cube_link.primary_cube_id.cube_id }},
                                Foreign: {{ cube_link.foreign_cube_id.cube_id }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="missing-items">
                    <h4>Missing Links for Cube Structure Items:</h4>
                    <table>
                        <thead>
                            <tr>
                                <th>Variable ID</th>
                                <th>Description</th>
                                <th>Is Mandatory</th>
                                <th>Order</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in gap.missing_items %}
                                <tr>
                                    <td>{{ item.variable_id }}</td>
                                    <td>{{ item.description }}</td>
                                    <td>{{ item.is_mandatory|yesno:"Yes,No" }}</td>
                                    <td>{{ item.order }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="no-gaps">
            <p>No gaps found in any cubes.</p>
        </div>
    {% endif %}
{% endif %}

<style>
    .filters {
        margin: 20px 0;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    select {
        width: 100%;
        max-width: 400px;
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }

    .gap-section {
        margin: 20px 0;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 5px;
    }

    .cube-links {
        margin: 15px 0;
    }

    .cube-links ul {
        list-style-type: none;
        padding-left: 0;
    }

    .cube-links li {
        margin: 5px 0;
        padding: 5px;
        background-color: #f8f9fa;
        border-radius: 3px;
    }

    .missing-items table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .missing-items th,
    .missing-items td {
        padding: 8px;
        border: 1px solid #dee2e6;
        text-align: left;
    }

    .missing-items th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .no-gaps {
        margin: 20px 0;
        padding: 15px;
        background-color: #e2e3e5;
        border-radius: 5px;
        text-align: center;
    }
</style>
{% endblock %}
